<template>
  <view class="page-class" v-if="load">
    <CommChart :height="chartHeight.one" :options="chartOptions.one" />
    <scroll-view class="lists" scroll-y>
      <view class="title">具体情况</view>
      <view class="list">
        <view class="item" v-for="item in userInfo" :key="item.id" @click="goResult(item)">
          <image :src="item.gender === 'F' ? 'http://www.xinchengai.top:443/nan.png' : 'http://www.xinchengai.top:443/nv.png'" mode="aspectFit" />
          <view class="tag" :class="`tag_${item.severityEvaluation}`"></view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script setup>
import { ref, onMounted } from "vue";
import CommChart from "@/components/Chart.vue";
import { reportsByClass, reportsStatisticsByClass } from "@/api";
import { onLoad } from "@dcloudio/uni-app";

const userInfo = ref([]);

const load = ref(false);

const chartHeight = ref({
  one: "200px",
});
const chartOptions = ref({
  one: {
    tooltip: {
      trigger: "item",
      show: true,
    },
    legend: {
      bottom: "0%",
      show: false,
    },
    color: ["#f5c057", "#f6c4b2", "#eb8966", "#b4682d", "#f3ede2"],
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "70%",
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: true,
          position: "top",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "40",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: true,
        },
        data: [],
      },
    ],
  },
});

const getInfo = (id) => {
  reportsByClass(id).then((res) => {
    userInfo.value = res;
  });
  reportsStatisticsByClass(id).then((res) => {
    const arr = [];
    res.forEach((item) => {
      const [name, value] = item;
      arr.push({
        name,
        value,
      });
    });
    chartOptions.value.one.series[0].data = arr;
    load.value = true;
  });
};

const goResult = (item) => {
  uni.navigateTo({
    url: `/pages/result/index?id=${item.id}`,
  });
};

onLoad((options) => {
  getInfo(options.id);
});
</script>
<style scoped lang="scss">
.page-class {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .lists {
    flex: 1 0 auto;
    height: 50%;
    overflow-y: scroll;
    margin: 40rpx auto 0 auto;
    box-sizing: border-box;
    .title {
      color: #c06318;
      font-size: 32rpx;
      margin: 0 40rpx 20rpx 40rpx;
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 40rpx;
      justify-content: flex-start;
      .item {
        background: #dedede;
        border-radius: 10rpx;
        margin-bottom: 20rpx;
        width: calc((100vw - 120rpx) / 3);
        height: calc((100vw - 120rpx) / 3);
        position: relative;
        &:nth-child(3n + 2) {
          margin: 0 20rpx;
        }
        .tag {
          position: absolute;
          bottom: -10rpx;
          right: -10rpx;
          width: 40rpx;
          height: 40rpx;
          border-radius: 10rpx;
          background: red;
          &.tag_1 {
            background: #f5c057;
          }
          &.tag_2 {
            background: #f6c4b2;
          }
          &.tag_3 {
            background: #eb8966;
          }
          &.tag_4 {
            background: #b4682d;
          }
        }
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
